<script setup lang="ts">
import { ref } from "vue";
const isShow = ref(false)
const toggel = () => { 
    isShow.value =!isShow.value 
}
</script>
<template>
   <button @click="toggel">显示/隐藏</button>
   <!-- show只创建一次，切换css来控制显示和隐藏 -->
    <!-- 适合频繁的显示和隐藏 -->
   <div v-show="isShow" class="box1">用v-show</div>
   <!-- if真实的创建和销毁 -->
   <div v-if="isShow" class="box2">用v-if</div>

</template>

<style>
.box1{
    width: 200px;
    height: 100px;
    background-color: red;
    margin-bottom: 20px;
}
.box2{
    width: 200px;
    height: 100px;
    background-color: #dba014;
}
</style>

